<template>
  <div style="padding:0px 20px">
    <el-col :span="10">
      <el-row style="margin-bottom: 10px">
        <el-col :span="14">
          <el-input placeholder="请输入任务编码或名称" v-model="taskNameAndTaskCode" class="input-with-select">
            <el-select v-model="appType" slot="prepend" placeholder="请选择应用类型" @change="toQueryTask">
              <el-option label="当前应用" value="1"></el-option>
              <el-option label="其他应用" value="2"></el-option>
            </el-select>
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search"
                     style="margin-left: 20px;" @click="toQueryTask()">搜索
          </el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-right"
                     @click="resetQuery()">重置
          </el-button>
        </el-col>
      </el-row>
      <!--表格渲染-->
      <el-table border height="470" ref="multipleTable" :data="data" highlight-current-row style="width: 100%;"
                @selection-change="selectionLineChangeHandle">
        <el-table-column type="selection"/>
        <el-table-column :show-overflow-tooltip="true" prop="taskCode" label="任务编码"/>
        <el-table-column :show-overflow-tooltip="true" prop="taskName" label="任务名称"/>
      </el-table>
      <!--分页组件-->
      <el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;"
                     layout="prev, pager, next, sizes" small :page-sizes="[10, 50, 100, 300, 500, 1000]"
                     :pager-count="5" prev-text=" " next-text=" " @size-change="sizeChange"
                     @current-change="pageChange"/>
    </el-col>
    <el-col :span="4" style="margin-top: 230px;text-align: center">
      <el-row>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
                   @click="addMonitorTask()">添加
        </el-button>
      </el-row>
      <el-row>
        <el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete"
                   style="margin-top: 20px;"
                   @click="delMonitorTask()">删除
        </el-button>
      </el-row>
    </el-col>
    <el-col :span="10">
      <el-row style="margin-bottom: 10px">
        <el-col :span="9">
          <el-input placeholder="请输入任务编码或名称" v-model="keywords" class="input-with-select"/>
        </el-col>
        <el-col :span="15">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search"
                     style="margin-left: 20px;" @click="toQueryTask2()">搜索
          </el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-right"
                     @click="resetQuery2()">重置
          </el-button>
          <el-button class="filter-item" size="mini" type="primary" style="margin-left: 20px;"
                     v-on:click="addDependOver()">确认选择
          </el-button>
        </el-col>
      </el-row>
      <el-table border height="470" :data="taskDependData" highlight-current-row
                style="margin-left: 0px;width: 100%;"
                @selection-change="selectionLineChangeHandle">
        <el-table-column type="selection"/>
        <el-table-column :show-overflow-tooltip="true" prop="taskCode" label="任务编码"/>
        <el-table-column :show-overflow-tooltip="true" prop="taskName" label="任务名称"/>
      </el-table>
    </el-col>
  </div>
</template>

<script>
import crud from '@/mixins/crud'

export default {
  props: ['taskDependData'],
  mixins: [crud],
  data() {
    return {
      taskNameAndTaskCode: null,
      appType: '1',
      keywords: null,
      backUpTaskList: [],
      dataonLineListSelections: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
    this.initData()
  },
  methods: {
    initData() {
      this.backUpTaskList = this.taskDependData
    },
    resetQuery() {
      this.taskNameAndTaskCode = null
      this.appType = '1'
      this.toQueryTask()
    },
    toQueryTask() {
      this.query = []
      var data = this.taskDependData
      this.query.appName = this.appType
      if ('' != this.taskNameAndTaskCode) {
        this.query.taskNameAndTaskCode = this.taskNameAndTaskCode
      }
      this.toQuery()
      this.taskDependData = data
    },
    toQueryTask2() {
      let newTaskList = []
      this.taskDependData.forEach(task => {
        if (task.taskCode.toUpperCase().includes(this.keywords.toUpperCase())) {
          newTaskList.push(task)
        }
      })
      this.taskDependData = newTaskList
    },
    resetQuery2() {
      this.taskDependData = this.backUpTaskList
      this.keywords = null
    },
    addDependOver() {
      this.$notify({
        title: '成功',
        message: '作业列表设置成功',
        type: 'success'
      });
      this.$emit('taskmessage', this.taskDependData)
    },
    // 获取数据前设置好接口地址
    beforeInit() {
      this.url = 'api/periodTaskDef/getTaskList'
      return true
    },
    selectionLineChangeHandle(val) {
      this.dataonLineListSelections = val
    },
    addMonitorTask() {
      if (this.dataonLineListSelections.length > 0) {
        this.dataonLineListSelections.forEach(item => {
          let isAdd = false
          this.taskDependData.forEach(hasAddTask => {
            if (item.taskCode === hasAddTask.taskCode) {
              isAdd = true
            }
          })
          if (!isAdd) {
            this.taskDependData.push({'taskName': item.taskName, 'taskCode': item.taskCode})
          }
        })
        this.backUpTaskList = this.taskDependData
        this.$refs.multipleTable.clearSelection()
      } else {
        this.$notify({title: '警告', message: '请选择至少一条任务', type: 'warning'})
      }
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true
        }
      }
      return false
    },
    delMonitorTask() {
      if (this.dataonLineListSelections.length > 0) {
        let taskNameList = []
        for (var i = 0; i < this.dataonLineListSelections.length; i++) {
          taskNameList.push(this.dataonLineListSelections[i].taskName)
        }
        for (var k = 0; k < this.taskDependData.length; k++) {
          if (this.isInArray(taskNameList, this.taskDependData[k].taskName)) {
            this.taskDependData.splice(k, 1)
            k--
          }
        }
        this.backUpTaskList = this.taskDependData
      } else {
        this.$notify({title: '警告', message: '请选择至少一条任务', type: 'warning'})
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

::v-deep .el-input-group .el-input__inner {
  width: 160px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

::v-deep .el-select .el-input .el-input__inner {
  width: 100px;
}
</style>
